import { useState, useEffect, memo } from "react";
import { Button, Switch } from "antd";

/**
 * React Memo
 * react 的渲染机制是：上层组件的state\props 改变，
 * 那么下层组件的UI会全部重新渲染，
 *
 * 下层组件要想不被渲染。需要使用
 * 函数组件使用React.memo包裹，或者类组件shouldComponentUpdate声明周期
 *
 *
 * React.memo允许您在组件的 props 保持不变时，跳过重新渲染组件。
 * 默认情况下，React 会在每次渲染时重新渲染组件。
 * 但是，如果组件的 props 没有变化，React 会跳过重新渲染。
 *
 * 默认情况下，React.memo 会将每个 prop 与 Object.is 进行比
 *
 * context发生变化时，被memo包裹的组件会重新渲染，只对父组件传递的props进行比较
 *
 */

export default function Memo() {
  const [open, setOpen] = useState(true);
  const [date, setDate] = useState(new Date().toLocaleString());

  useEffect(() => {
    const timerID = setInterval(() => {
      setDate(new Date().toLocaleString());
    }, 1000);
    return () => {
      clearInterval(timerID);
    };
  }, []);

  return (
    <div>
      <h1>React Memo</h1>
      <Button onClick={() => setOpen(!open)}>SWITCH</Button>
      <h3>{date.toString()}</h3>
      <MySwitchMemo open={open} />
    </div>
  );
}

const MySwitchMemo = memo<{
  open: boolean;
}>((props) => {
  console.log("下层组件渲染了");
  return <Switch checked={props.open} />;
});
